<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2 设置欢迎语和海报</title>

  <link rel="stylesheet" href="http://at.alicdn.com/t/font_993687_82k7wxej3dg.css">
  <link rel="stylesheet" href="/fission/css/layui.css">
  <link rel="stylesheet" href="/fission/css/common.css">
  <link rel="stylesheet" href="/fission/css/mission.css">
</head>
<body>
  
  <section class="public-container">
    <form class="layui-form poster-form" id="form1">
      <div class="container-header">
        <p class=""><strong>选择客户参与方式</strong></p>
        <hr>
      </div>
      <div class="layui-form-item">
        <div style="margin-left: 20px;" class="layui-input-block">
          <input type="radio" name="invitation_check" value="1" title="邀请参与客户" {if $qyFission->invitation_check != 2}checked{/if}>
          <input type="radio" name="invitation_check" value="2 " title="暂不邀请" {if $qyFission->invitation_check == 2}checked{/if}>
        </div>
      </div>

      <!-- 邀请参与客户 -->
      <section>

        <div style="margin-bottom: 5px;" class="layui-form-item">
          <label class="layui-form-label"><span style="color: red;">*</span> 选择客户：</label>
          <div class="layui-input-block">
            <input type="radio" name="invitation_range" value="1" title="全部客户" {if $qyFission->invitation_range != 2}checked{/if}>
            <input type="radio" name="invitation_range" value="2 " title="筛选客户" {if $qyFission->invitation_range == 2}checked{/if}>
          </div>
        </div>
		<div class="layui-form-item">
          <label class="layui-form-label">筛选客户：</label>
          <div style="width: auto;" class="layui-input-inline">
            <button id="addEt" type="button" class="layui-btn layui-btn-primary">+ 选择客户</button>
          </div>
		  </div>
		  <input type="hidden" name="selected_et" value="{implode(',',json_decode($qyFission->selected_et,1))}" id="selectedEt"/>
          <div class="layui-form-item">
          <label class="layui-form-label"></label>
          <div class="flex align-start" id="selectedEtCon">
		  {loop json_decode($qyFission->selected_et,1) as $et}
				<div class="service-card">
				<i class="iconfont icon-person"></i>{$h->get_et_by_userid($qyFission->wid,$et)['name']}
				</div>
		 {/loop}
          </div>
        </div>
       
      </section>

      <div class="container-header">
        <p class=""><strong>邀请文案</strong></p>
        <hr>
      </div>
      <div style="-webkit-box-align: start;align-items: flex-start;" class="flex">
        <div class="flex-1">
          
          <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span> 邀请文案：</label>
            <div class="layui-input-block rich-text-wrap">
              <div class="insert-btn">
                <!--<span>[插入客户昵称]</span>-->
              </div>
              <div class="rich-text-box">
                <textarea name="invitation_text" class="layui-textarea">{if $qyFission->invitation_text}{$qyFission->invitation_text}{else}你好，我们正在进行xxx活动，只要邀请x位好友添加我的微信就可以获得奖品

参与流程：
①点击下面链接，生成专属海报
②进入链接后长按保存海报，将海报发给好友或朋友圈
③邀请x位好友扫码添加，即可成功获得奖品
④进入链接点击查看进度，完成任务后点击「领取奖励」即可领取哦

注意事项：请不要直接转发活动链接给好友，是无法成功记录数据的哦~{/if}
                </textarea>
                <!--<p>171/4000</p>-->
              </div>
            </div>
          </div>

          <div class="container-header">
            <p class=""><strong>邀请链接</strong></p>
            <hr>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label"><span style="color: red;">*</span> 标题：</label>
              <div class="layui-input-block">
                <input style="width: 464px;" type="text" name="invitationLink_title" required  lay-verify="required" value="{$qyFission->invitationLink_title?$qyFission->invitationLink_title:点击这里，完成任务领取奖品吧}" placeholder="请输入标题" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color: red;">*</span> 摘要：</label>
              <div class="layui-input-block">
                <input style="width: 464px;" type="text" name="invitationLink_desc" required  lay-verify="required" value="{$qyFission->invitationLink_desc?$qyFission->invitationLink_desc:快来参加活动吧}" placeholder="请输入摘要" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">封面：</label>
              <div class="layui-input-block poster-cover-box">
                <div class="poster-cover">
                  <img id="pic_invitationLinkPic" src="{$qyFission->invitationLink_pic?$qyFission->invitationLink_pic:'https://3yutop.oss-cn-beijing.aliyuncs.com/qvmhcn/link.png'}" alt="">
                   <input type="hidden" name="invitationLink_pic" value="{$qyFission->invitationLink_pic?$qyFission->invitationLink_pic:'https://3yutop.oss-cn-beijing.aliyuncs.com/qvmhcn/link.png'}" id="invitationLinkPic" />
				  <!--<i class="iconfont icon-clear-outline"></i>-->
                </div>
                <a class="select_img" data-target="invitationLinkPic" style="color: #1E9FFF;" href="javascript:;">重新选择</a>
              </div>
            </div>

          <div style="margin-top: 40px;" class="layui-form-item">
            <div class="layui-input-block">
              <!--<button type="button" class="layui-btn layui-btn-primary">上一步</button>-->
            <button type="button" class="layui-btn layui-btn-normal" onclick="submitForm()" lay-filter="demo1">提交</button>
            </div>
          </div>
        </div>

        <div class="phone-previewer">
          <div class="phone-pre-content">
            <img src="/fission/img/phone-box.png" class="phone-bg" alt="">
            <div class="phone-content">
              <p class="date">17:20</p>
              <div class="phone-msg-wrap">
                <div class="phone-msg phone-msg-text">
                  <img src="/fission/img/avatar-default.svg" class="phone-msg-avatar" alt="">
                  <div> 你好，我们正在进行xxx活动，只要邀请x位好友添加我的微信就可以获得奖品

参与流程：
①点击下面链接，生成专属海报
②进入链接后长按保存海报，将海报发给好友或朋友圈
③邀请x位好友扫码添加，即可成功获得奖品
④进入链接点击查看进度，完成任务后点击「领取奖励」即可领取哦

注意事项：请不要直接转发活动链接给好友，是无法成功记录数据的哦~
                  </div>
                </div>
                <div class="phone-msg phone-msg-news">
                  <img src="/fission/img/avatar-default.svg" class="phone-msg-avatar" alt="">
                  <div class="news">
                    <p class="title">点击这里，完成任务领取奖品吧👇</p>
                    <div>
                      <span class="desc">快来参加活动吧</span>
                      <img src="https://3yutop.oss-cn-beijing.aliyuncs.com/qvmhcn/link.png">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </form>
  </section>


  <script src="/fission/js/layui.all.js"></script>
  <script src="/js/ajax.js"></script>
  <script>
	$('#addEt').on('click',function(){
		layer.open({
		type: 2,
		title: '请选择客户',
		shadeClose: true,
		shade: 0.2,
		area: ['700px', '400px'],
		content: 'select_et.html'
		}); 
	})
	function submitForm(){
		var formData = $('#form1').serialize();	
		//alert(formData);return;
		myAjaxPost(false, true, '', formData, function (resp) {
			if (resp.status == 'success') {
				tusi(resp.msg);
				setTimeout(function(){
					location.href = 'mission_list.html'; 
				},2000);
			}else{
				alert(resp.msg);
			}
		});
	}
	$('.select_img').on('click',function  () {
	  var targetId=this.getAttribute('data-target');
	  layer.open({
		title:'图片库',
		type: 2,
		area: ['700px', '450px'],
		fixed: false, //不固定
		maxmin: false,
		content: '/imgLib/lib.html?type=vshop_img&target='+targetId
	  });
	})
	window.uploadImgCallback=function (tgt,url) {
	  console.log('选择图片结果',tgt,url);
	  if(tgt=='invitationLinkPic'){
		var inputEle=$('#invitationLinkPic');
		var prevEle=$('#pic_invitationLinkPic');
		inputEle.val(url);
		prevEle.attr('src',url);
		//prevEle.show();
	  }
	};
  </script>
  <script>
    layui.use('colorpicker', function() {
      var colorpicker = layui.colorpicker;
      //渲染
      colorpicker.render({
        elem: '#nicknameColorPicker',  //绑定元素
        color: '#000000',
        done: function(color) {
          console.log(color)
        }
      });
    });

    layui.use('upload', function() {
      var upload = layui.upload;
      // 企业logo上传
      upload.render({
        elem: '#idcardLogoUpload'
        ,url: 'https://httpbin.org/post' //改成您自己的上传接口
        ,done: function(res){
          // layer.msg('上传成功');
          layui.$('#idcardLogoPre').removeClass('layui-hide').find('img').attr('src', res.files.file);
        }
      })
      // 链接封面上传
      upload.render({
        elem: '#linkCoverUpload'
        ,url: 'https://httpbin.org/post' //改成您自己的上传接口
        ,done: function(res){
          layui.$('.poster-cover img').attr('src', res.files.file)
        }
      })
    })

    layui.use('laydate', function(){
      var laydate = layui.laydate;

      // 邀请日期范围
      laydate.render({
        elem: '#invitationDateRange'
        ,range: true
      });
    })

  </script>
</body>
</html>